<template>
  <div class="pagination-container">
    <span class="pagination-info">共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPages }} 页</span>
    <el-button-group>
      <el-button class="pagination-button" @click="handleCurrentChange(head)" :disabled="currentPage === 1">首页</el-button>
      <el-button class="pagination-button" @click="handleCurrentChange(currentPage - 1)" :disabled="currentPage === 1">上一页</el-button>
      <el-button class="pagination-button" @click="handleCurrentChange(currentPage + 1)" :disabled="currentPage === totalPages">下一页</el-button>
      <el-button class="pagination-button" @click="handleCurrentChange(totalPages)" :disabled="currentPage === totalPages">尾页</el-button>
    </el-button-group>
  </div>
</template>

<script setup>
import {ref, defineEmits} from "vue";

const props = defineProps({
  total: {
    type: Number,
    required: true,
  },
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
})
const head = ref(1);
const emit = defineEmits(['update:currentPage']);

const handleCurrentChange = (page) => {
  emit('update:currentPage', page);
};
</script>

<style scoped lang="scss">
/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
  align-items: center;
  gap: 10px; /* 间距 */
  margin-top: 20px;
  color: #FFFFFF; /* 分页信息文字颜色 */
}

/* 分页按钮样式 */
.pagination-button {
  background-color: transparent;
  border: 1px solid $color-font-pagination-button;
  color: $color-font-pagination-button;
}

.pagination-button:hover {
  background-color: $color-pagination-button-hover; /* 鼠标悬停时的按钮背景颜色 */
  border-color: $color-border-pagination-button-hover;
  color: $color-font-pagination-button-hover; /* 鼠标悬停时的按钮文字颜色 */
}

.pagination-button.is-disabled {
  background-color: transparent; /* 禁用按钮背景颜色 */
  color: $color-font-pagination-button-disabled; /* 禁用按钮文字颜色 */
  opacity: 0.5;
}
</style>